<template>
  <div class="div">
    <div>this is User Detial</div>
    <div>
      <span>name:</span>
      <span>{{state.name}}</span>
    </div>
    <div>
      <span>id:</span>
      <span>{{state.id}}</span>
    </div>
    <button :click="{{this.initUser}}">init user</button>
    <button :click="{{this.changeUser}}">change user</button>
    <button :click="{{this.onClick}}">go home</button>
  </div>
</template>

<script>
import {WebComponents, container} from '../../../src/index.js'
// import store from '../../store'
import {initUser, ActionTypes} from './reducer'
class Detial extends WebComponents {
  constructor() {
    super()
    console.log('Detial constructor')
  }
 
  disconnectedCallback() {
    console.log('Detial disconnectedCallback')
  }
  initUser(){
    this.dispatch(initUser())
  }
  changeUser() {
    this.dispatch({type: ActionTypes.change, user: {
        name: '张三',
        id: '123456' + Date.now()
      }
    })
  }
  onClick() {
    history.pushState({form: 'detail'}, '', '/')
  }
}
export default container(Detial, 'detail')
</script>

<style>
  .div {
    height: 500px;
    background: rgb(231, 150, 150);
    border: 1px solid #ababab;
  }
</style>